﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>周期列表</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/app.js"></script>
    <script>


        function InitPeriodList() {
            $("#periodListDiv").text("加载中...");
            AjaxGet("/config/getperiodlist", function (data) {
                $("#periodListDiv").empty();
                var html = "";
                $.each(data, function (index, item) {
                    html += '<p><span class="periodidSpan" style="font-weight:bold;width:100px;display:inline-block;">' + item.PeriodID + '</span><span class="periodnameSpan">' + item.PeriodName + '</span><input class="updatePeriodBtn" type="button" value="修改"><input class="deletePeriodBtn" type="button" value="删除"></p>';
                })
                $("#periodListDiv").append(html);
            });
        }

        $(document).ready(function () {

            InitPeriodList();

            $("#addPriodBtn").click(function () {
                $("#addPeriodSubmit").show();
                $("#updatePeriodSubmit").hide();
                $("#addPeriodDiv").show();
            });

            $("#addPeriodSubmit").click(function () {
                var periodid = $("#periodid").val();
                var periodname = $("#periodname").val();
                AjaxPost("/config/addperiod", { periodid: periodid, periodname: periodname }, function (data) {
                    InitPeriodList();
                });
            });

            $("#periodListDiv").on("click",".updatePeriodBtn", function () {
                $("#addPeriodDiv").show();
                var periodid = $(this).siblings(".periodidSpan").text();
                var periodname = $(this).siblings(".periodnameSpan").text();
                $("#periodid").val(periodid)
                $("#periodname").val(periodname)
                $("#addPeriodSubmit").hide();
                $("#updatePeriodSubmit").show();
            });

            $("#updatePeriodSubmit").click(function () {
                var periodid = $("#periodid").val();
                var periodname = $("#periodname").val();
                AjaxPost("/config/updateperiod", { periodid: periodid, periodname: periodname }, function (data) {
                    InitPeriodList();
                });
            });


            $("#periodListDiv").on("click", ".deletePeriodBtn", function () {
                var periodid = $(this).siblings(".periodidSpan").text();
                AjaxPost("/config/deleteperiod", { periodid: periodid }, function (data) {
                    InitPeriodList();
                });
            });
        });
    </script>
</head>

<body>
    <div>
        <input id="addPriodBtn" type="button" value="添加/修改周期">
        <div id="addPeriodDiv" style="display:none">
            <div>
                <label for="username">周期ID</label>
                <input type="text" id="periodid" placeholder="周期ID">
            </div>
            <div>
                <label for="password">周期名</label>
                <input type="text" id="periodname" placeholder="周期名">
            </div>
            <input id="addPeriodSubmit" type="submit" value="添加">
            <input id="updatePeriodSubmit" type="submit" value="修改">
        </div>
    </div>
    <div>
        <p><span style="width:100px;display:inline-block;">周期ID</span>周期名称</p>
        <div id="periodListDiv">

        </div>
    </div>

    <div>
        <a href="/logout">退出</a>
    </div>
</body>

</html>